<script setup lang="ts">
import MyButton from "@/components/common/myButton.vue";
import {ref, watch} from "vue";
import {useRouter} from "vue-router";

interface recruitElementType {
  id: number,
  name: string,
  salary: string,
  education: string,
  place: string,
  enterprise_id: string,
  enterprise_name: string,
  enterprise_industry: string,
  enterprise_image_key: string,
  admin_id: number,
  admin_name: string
}
const elementData = ref<recruitElementType>({
  id: 0,
  name: "",
  salary: "",
  education: "",
  place: "",
  enterprise_id: "",
  enterprise_name: "",
  enterprise_industry: "",
  enterprise_image_key: "",
  admin_id: 0,
  admin_name: ""
})

const router = useRouter();
const props = defineProps({
  data: {
    type: Object,
    require: true,
  }
});

const toChat = (adminId: number, positionId) => {
  router.push({path: "/chat", query: {id: adminId, positionId: positionId} });
}
watch(() => props, (newValue, oldValue) => {
  elementData.value = newValue.data
}, {deep: true, immediate: true});
</script>

<template>
  <span style="display: flex; flex-direction: column">
<!--      <div>这是一条岗位搜索结果</div>-->
      <span style="display: flex; align-items: flex-end">
        <div class="position">{{ elementData.name }}</div>
        <div style="margin-left: 5px" class="secondaryInfo">{{elementData.salary}}</div>
      </span>
      <div class="secondaryInfo">{{ elementData.enterprise_name }} · {{ elementData.place }}</div>
    </span>
  <my-button type="light" :width="200" @click="toChat(elementData.admin_id, elementData.id)">{{ '立刻沟通: ' + elementData.admin_name + "经理" }}</my-button>
</template>

<style scoped>
.position {
  /*color: var(--color-primary);*/
  font-size: var(--font-size-large);
  font-weight: 600;
}
.secondaryInfo {
  color: grey;
  font-size: var(--font-size-small);
}
</style>